<template>
    <div>
        <div class="baifang">
        <van-icon name="arrow-left" @click="$router.go(-1)"/>
        <h1>拜访记录</h1>
        <span @click="baifang">新增</span>
        </div>
        <van-search
  v-model="value"
  show-action
 
  placeholder="客户名称/拜访标题"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
          <div class="BigBox" v-for="(item,index) in zoufang" :key="index" @click="xiangqing(item.id)">
                 <div class="oneBox" >
                     <img src="../../assets/合作伙伴.png" alt="">
                 </div>
                 <div class="twoBox">
                     <ul>
                         <li>
                             <span>拜访标题</span><strong>{{item.visitTitle}}</strong>
                         </li>
                         <li class="pp">
                             <span>客户名称</span><strong>{{item.custName}}</strong>
                         </li>
                          <li class="sanli">
                             <span>拜访时间</span><strong>{{item.visitTime}}</strong>
                         </li>
                     </ul>
                 </div>
                <div class="sanBox">
                    <span>定期回访</span>
                </div>
          </div>
    </div>
</template>

<script>
import {GetVisitDate} from "@/request/api"
export default {
    name:'Visitrecord',
    data () {
        return {
            zoufang:null,
            value:''
        }
    },
    methods:{
        xiangqing(val){
            this.$router.push(`/visitdetails/${val}`)
console.log(666);
        },
            baifang(){
                this.$router.push('/newvisitinformation')
            },
            onSearch(){
            console.log(666);
               GetVisitDate({
          keyword:this.value,
          current:'1',
          size:'20',
        }).then((res)=>{
            console.log(res.data.data.records);
            this.zoufang=res.data.data.records
            console.log("走访搜索的成功数据:",res);
        })
            }
    },
    created(){
        GetVisitDate({
          keyword:'',
          current:'1',
          size:'20',
          
        }).then((res)=>{
            console.log(res.data.data.records);
            this.zoufang=res.data.data.records
            console.log("走访的成功数据:",res);
        })
    }
}
</script>
 
<style lang = "less" scoped>
    .baifang{
        font-size: .14rem;
        height: .5rem;
        line-height: .5rem;
        background: #173399;
        color: white;
        display: flex;
        padding: 0 .15rem;
        align-items: center;
        h1{
            flex: 1;
            text-align: center;
        }
    }
    .BigBox{
           display: flex;
    font-size: 0.14rem;
    align-items: center;
    padding: 0.25rem 0.15rem;
    background: #fff;
    margin-top: .15rem;
    .oneBox{
        img{
            display: block;
            width: .8rem;
            height: .8rem;
        }
    }
        .twoBox{
            flex: 1;
            margin-left: .2rem;
            ul{
                li{
                   span{
                       color: #999999;
                   }
                }
                .sanli{
                    display: flex;
                    font-size: .12rem;
                }
                .pp{
                    margin: .15rem 0;
                }
            }
        }
        .sanBox{
            color: #fd9418;
            display: block;
            border: 1px solid #f7af52;
            padding:  .1rem .1rem;
            background: #fff7e7;
        }
        
    }
</style>